<template>
  <div class="bg-white height-100 border-box">
    <el-amap
      ref="map" class="map-component"
      map-style="amap://styles/macaron"
      :zoom="20"
      :events="mapEvents"
    >
      <div class="data-button" :style="{backgroundColor: themeColor}" @click="clickButton">
        <span class="flex-center button-icon">
          <svg-icon name="arrow-right"></svg-icon>
        </span>
        <span class="button-text">监管企业情况TOP10</span>
      </div>
      <table-modal ref="modal"></table-modal>
    </el-amap>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from '@/plugins/amap'
import TableModal from './table-modal'
import { getListEnterprise } from '@/api/enterprose'

Vue.use(VueAMap)
export default {
  name: 'geolocation-monitor',
  components: {
    TableModal
  },
  data () {
    return {
      map: null,
      mapEvents: {
        init: (map) => {
          this.map = map
          this.getPoints().then(points => {
            const markers = this.createMarkers(points)
            map.add(markers)
            map.setFitView()
          })
        }
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  methods: {
    clickButton () {
      this.$refs.modal.open()
    },
    getPoints () {
      return new Promise((resolve) => {
        getListEnterprise().then(res => {
          if (res.code === 200) {
            res.data.forEach(v => {
              v.pos = (v.longitude && v.latitude) ? [Number(v.longitude), Number(v.latitude)] : null
              v.addr = v.enterpriseName
            })
            resolve(res.data.filter(v => !!v.pos))
          }
        })
      })
    },
    createMarkers (points) {
      let markers = null
      const AMap = window.AMap
      if (AMap) {
        markers = points.map(v => {
          const position = new AMap.LngLat(Number(v.longitude), Number(v.latitude))
          const content = `
            <div class="padding popper-marker">${v.addr}</div>
          `
          const marker = new AMap.Marker({
            position: position,
            content: content,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          })
          marker.on('click', () => {
            this.$router.push({
              name: 'EnergyEfficiencyAnalysisEnterprise',
              query: {
                enterpriseCode: v.id
              }
            })
          })
          return marker
        })
      }
      return markers
    },
    createMarkerText (positions, address) {
      let markers = null
      const AMap = window.AMap
      if (AMap) {
        markers = positions.map((v, i) => {
          const position = new AMap.LngLat(...v)
          return new AMap.Text({
            position: position,
            text: address[i],
            anchor: 'top-center'
          })
        })
      }
      return markers
    },
  }
}
</script>

<style lang="scss" scoped>
  .map-component {
    position: relative;
  }
  .data-button {
    display: flex;
    flex-direction: column;
    padding: 15px 12px;
    border-radius: 20px;
    font-size: 16px;
    z-index: 99;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #f9f9f9;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
    transition: all .3s;
    &:hover {
      color: #ffffff;
      box-shadow: 0 0 10px 6px rgba(0,0,0,0.1);
    }
  }
  .button-icon {
    border: 1px solid white;
    border-radius: 50%;
  }
  .button-text {
    margin-top: 10px;
    letter-spacing: 2px;
    writing-mode: vertical-lr;
    cursor: default;
  }
</style>
